<template>
  <div class="container" @click="btn">
    <div class="swiper">
      <swiper :options="GallarySwiper" >     
        <swiper-slide v-for="(item, index) in imgs" :key="index">          
          <img class="gallary-img" :src="item" alt="">  
        </swiper-slide> 

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>            
      </swiper>
    </div>    
  </div>
</template>

<script>
export default {
  name: "gallary",
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      GallarySwiper: {
        pagination: ".swiper-pagination",
        paginationType: 'fraction',
        
        observeParents: true,
        observer: true,
      },
    }
  },
  methods: {
    btn() {
      this.$emit("handleBtn");
    }
  },
  
}
</script>

<style scoped>
  /* 盒子 */
  .container {    
    overflow: hidden;
            
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 3;

    background-color: black;
    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* 轮播图 */
  .container .swiper {
    width: 100%;    
  }
  .container .swiper .gallary-img {
    width: 100%;
    height: 100%;
  }

  /* 默认样式设置 */
  .container >>> .swiper-container {
    overflow: inherit;
  }
  /* 小圆点 */
  .container .swiper .swiper-pagination {
    position: absolute;
    bottom: -50px;
    
    color: #fff;
  }   
</style>